<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Frame</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
		<link rel="stylesheet" type="text/css" href="css/mui.min.css"/>
		<link rel="stylesheet" type="text/css" href="css/frame.css"/>
	</head>
	<body>
		<div id="frame-content"></div>
		
		<script id="frame" type="text/html">
			<p class="rec">{{ rec }}</p>
			
			<p class="author">
				<img src="{{ avatar }}" data-src="{{ avatar }}" />
				<span class="name">{{ author }}</span>
			</p>
			
			{{ if title.length < 30 }}
			<p class="title" style="text-align: center;">{{ title }}</p>
			{{ else }}
			<p class="title">{{ title }}</p>
			{{ /if }}
			
			{{ each content }}
				{{ if $value.type=='photo' }}
				<img class="photo-img" src="img/grey-back.png" data-src="{{ $value.rawUrl }}" onload="load(this);" />
				{{ /if }}
				
				{{ if $value.type=='gif' }}
				<div class="gif-box">
					<img class="photo-img gif" src="img/grey-back.png" data-src="{{ $value.rawUrl }}" onload="load(this);" />
				</div>
				{{ /if }}
				
				{{ if $value.type=='text' }}
				<div class="text">
					<p>{{ $value.text }}</p>
				</div>
				{{ /if }}
				
				{{ if $value.type=='video' }}
				<div class="video-cover" data-id="{{ $value.id }}" style="min-height: {{ $value.width*9/16 }}px;">
					<img class="cover" src="img/grey-back.png" data-src="{{ cover }}" style="min-height: {{ width*9/16 }}px;" onload="load(this);" />
					<img class="play" src="img/icon_play.png"/>
				</div>
				<div class="video">
					<video id="video-{{ $value.id }}" data-src="{{ url }}" webkit-playsinline width="1" height="1" class="vplayinside notaplink" x-webkit-airplay controls loop="loop"></video>
				</div>
				{{ /if }}
			{{ /each }}
		</script>
		<img id="share-btn" class="down-hide" src="img/btn_share.png"/>
		<img id="back-btn" class="mui-action-back down-hide" src="img/btn_back.png"/>
		
		<div id="share" class="mui-popover mui-popover-action mui-popover-bottom">
			<img data-id="sinaweibo" data-type="sinaweibo" src="img/share_weibo.png"/>
			<img data-id="qq" data-type="qq" src="img/share_qq.png"/>
			<img data-id="weixin" data-type="weixin-session" src="img/share_weixin.png"/>
			<img data-id="weixin" data-type="weixin-timeline" src="img/share_timeline.png"/>
			<img data-id="qq" data-type="qq" class="qzone" src="img/share_qzone.png"/>
			<img data-type="link" class="link" src="img/share_link.png"/>
		</div>
		
		<script src="js/template.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/av-mini.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/mui.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/md5.min.js"></script>
		<script src="js/imgload.js"></script>
		<script src="js/frame.js" type="text/javascript" charset="utf-8"></script>
	</body>
</html>
